<template>
  <div v-loading="loading">
    <el-dialog title="SKU列表" v-model="show" width="60%">
      <el-table border :data="skuArr">
        <el-table-column label="sku名字" prop="skuName" />
        <el-table-column label="sku价格" prop="price" />
        <el-table-column label="sku重量" prop="weight" />
        <el-table-column label="sku图片">
          <template #="{ row }">
            <el-image :src="row.skuDefaultImg" fit="cover" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { reqSkuList } from '@/api/product/spu'
  import type { SkuData, SkuInfoData, SpuData } from '@/api/product/spu/type'
  import { getElMessage } from '@/utils/message'
  import { ref } from 'vue'

  const loading = ref<boolean>(false)
  const skuArr = ref<SkuData[]>([])
  const show = ref<boolean>(false)

  async function getSkuInfo(sku: SpuData) {
    try {
      loading.value = true
      const res: SkuInfoData = await reqSkuList(sku.id as number)
      skuArr.value = res.data
      if (res.code !== 200) {
        getElMessage(`获取${sku.spuName}失败`, 'error')
      }
    } catch (error) {
      getElMessage((error as Error).message, 'error')
    } finally {
      loading.value = false
    }
  }

  function openSkuDialog(sku: SpuData) {
    show.value = true
    getSkuInfo(sku)
  }

  defineExpose({
    openSkuDialog,
  })
</script>

<style lang="scss" scoped></style>
